<template>
  <div class="param-main">
    <div class="page-pane2">
      <el-button size="small" @click="detailTblMain(1)">新增</el-button>
      <el-button type="primary" size="small" @click="getSelfApplyList()"
          >查询</el-button
        >
      <el-button size="small" type="danger" @click="deleteEvent(1)"
        >删除</el-button
      >
    </div>
    <div style="height: calc(100% - 120px)">
      <el-table
        ref="tblMain"
        style="margin-top: 20px"
        :data="listData"
        height="100%"
        @selection-change="handleSelectionChange"
        v-loading.body="loading"
        border
        stripe
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          type="index"
          width="50"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="300px">
          <template slot-scope="scope">
            <el-button  type="text" @click="detailTblMain(2,scope.row)" v-if="scope.row.state == '0'||scope.row.state == '3'">编辑</el-button>
            <el-divider direction="vertical" v-if="scope.row.state == '0'"></el-divider>
            <el-button  type="text" @click="deleteEvent(scope.row)" v-if="scope.row.state == '0'">删除</el-button>
            <el-divider direction="vertical" v-if="scope.row.state == '0'"></el-divider>
            <el-button  type="text" @click="detailTblMain(4,scope.row)">交接清单</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button  type="text" @click="submit(scope.row)" v-if="scope.row.state == '0'||scope.row.state == '3'">提交</el-button>
            <el-divider direction="vertical" v-if="scope.row.state == '0'"></el-divider>
            <el-button  type="text" @click="detailTblMain(3,scope.row)">明细</el-button>
          </template>
        </el-table-column>
         <el-table-column prop="empName" label="员工姓名" align="center">
          <template slot-scope="scope">
            <span >{{ scope.row.empName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="leaveReason" label="退出原因" align="center">
          <template slot-scope="scope">
            <span >{{ scope.row.leaveReason }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="leaveDate" label="退出时间" align="center">
          <template slot-scope="scope">
            <span >{{ scope.row.leaveDate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          align="center"
        >
        <template slot-scope="scope">
            <span> {{ formatterFiled(scope.row.state,'code','name',stateList) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="margin-top: 10px"
      :current-page.sync="pageInfo.page"
      :page-size="pageInfo.size"
      :total="pageInfo.total"
      layout="total, sizes, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <add-leave-apply
      ref="addBrand"
      v-if="visible"
      @ok="saveData"
      @cancle="cancle"
      :title="title"
      :row="rowData"
      :stateList="stateList"
    ></add-leave-apply>
    <store-hdv-table ref="shTable" v-if="isShow"  :title="title" :rowData="rowData"  @ok="saveData"
      @cancle="cancleT"></store-hdv-table>
  </div>
</template>
<script>
import {
  addApply,
  delApply,
  upApply,
  batchSave,
  submitApply,
  getSelfApplyList,
} from '@/api/businessCo'
import AddLeaveApply from './addLeaveApply.vue'
import StoreHdvTable from '../components/storeHdvTable.vue'
export default {
  name: 'applyMain',
  props: ['pageData'],
  components: {
    AddLeaveApply,
    StoreHdvTable
  },
  data() {
    return {
      visible: false,
      isShow:false,
      loading:false,
      rowData: {},
      title: '',
      selection:[],
      listData: [],
      pageInfo: {
        page: 1,
        size: 10,
        total: 0
      },
      stateList: [
        {
          code: '0',
          name: '未提交',
        },
        {
          code: '1',
          name: '待审批',
        },
        {
          code: '2',
          name: '审批通过',
        },
        {
          code: '3',
          name: '驳回',
        },
      ],
    }
  },
  watch: {},
  mounted() {
    this.getSelfApplyList()
  },
  methods: {
    /**
     * 获取码值
     */
    formatterFiled(cellValue,key,val,list) {
      let item = list.find((item) => item[key] === cellValue)
      return item ? item[val] : ''
    },
    /**
     * 获取申请列表信息
     */
    getSelfApplyList() {
        let data = {
          page: this.pageInfo.page,
          size: this.pageInfo.size,
        }
        this.loading = true
        getSelfApplyList(data).then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.loading = false
            this.listData = data.record;
            this.pageInfo.total = data.total
          } else {
            this.$message.error(data)
          }
        }).catch(() => {
          this.$message.error('服务器繁忙')
          this.loading = false
        })
    },
    /**
     * 删除
     */
    deleteEvent(row) {
      let ids = []
      if(row == '1'){
         if (this.selection.length < 1) {
          this.$message.warning('请至少选择一条数据')
          return
        }
        ids = this.selection.map(item=>{
          return item.id
        })
      }else{
        ids.push(row.id)
      }
      this.$confirm('此操作将永久删除该申请, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let data = {
            ids:ids
          }
          delApply(data).then((res) => {
            const { code = undefined, data = {} } = res.data
            if (!code) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getSelfApplyList();
            } else {
              this.$message({
                type: 'error',
                message: '操作失败!'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    /**
     * 点击功能按钮
     */
    detailTblMain(type,row) {
      if (type != 1) {
        this.title = type == 2 ? '修改申请' : (type == 4 ? '查看交接清单' : '申请详情')
        this.rowData = JSON.parse(JSON.stringify(row))
      } else {
        this.title = '新增申请'
        this.rowData = {}
      }
      if(type == 4){
        this.isShow = true
      }else{
        this.visible = true
      }
    },
    /**
     * 保存
     */
    saveData(val) {
      if (this.title == '新增申请') {
        addApply(val).then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getSelfApplyList();
            this.cancle()
          } else {
            this.$message({
              type: 'error',
              message: data
            })
          }
        })
      } else if (this.title == '修改申请'){
        upApply(val).then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getSelfApplyList();
            this.cancle()
          } else {
            this.$message({
              type: 'error',
              message: '操作失败!'
            })
          }
        })
      }else{
        console.log(val)
        batchSave(val).then(res=>{
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getSelfApplyList();
            this.cancleT()
          } else {
            this.$message({
              type: 'error',
              message: data
            })
          }
        })
      }
    },
    /**
     * 提交
     */
     submit(row){
      let data = {
        ids:[row.id]
      }
      submitApply(data).then(res=>{
        const { code = undefined, data = {} } = res.data
          if (!code) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getSelfApplyList();
          } else {
            this.$message({
              type: 'error',
              message: data
            })
          }
      })
     },
    /**
     * 关闭弹框
     */
    cancle() {
      this.visible = false
    },
    /**
     * 关闭弹框
     */
    cancleT() {
      this.isShow = false
    },
     /**
     * 多选
     */
     handleSelectionChange(val) {
      this.selection = val
    },
     /**
     * 分页
     */
     handleSizeChange(val) {
      this.pageInfo.size = val
      this.getSelfApplyList()
    },
    /**
     * 分页
     */
    handleCurrentChange(val) {
      this.pageInfo.page = val
      this.getSelfApplyList()
    },
  }
}
</script>
<style scoped lang="scss">
</style>
